<div class="portlet light bordered" style="margin: 15px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold">TaskId: {{task.id}}</span>
        </div>
        <div class="actions">
            <button type="button" class="btn blue" ng-click="editTask()"
                    permission-check="{{'task::putBackTask_write'}}"
                    ng-disabled="">Edit Put Back Task</button>
        </div>
    </div>
    <div class="portlet-body  form form-horizontal">
        <div class="form-group">
            <span class="col-md-3"><b>Assignee: </b>{{task.assignee.firstName}}{{task.assignee.lastName}}</span>
            <span class="col-md-3"><b>Status: </b>{{task.status}}</span>
            <span class="col-md-3"><b>Priority: </b>{{task.priority}}</span>
        </div>
        <div class="form-group">
            <span class="col-md-3"><b>Order ID: </b>
                 <a ng-href="{{'#/wms/outbound/order/' + task.reference.orderId}}" target="_blank"> {{task.reference.orderId}}</a>
            </span>
            <span class="col-md-3"><b>Load ID: </b>
                <a g-href="{{'#/wms/outbound/load/' + task.reference.loadId}}" target="_blank"> {{task.reference.loadId}}</a>
            </span>
            <span class="col-md-3"><b>Dock ID: </b>
              {{task.reference.dockId}}
            </span>
            <span class="col-md-3"><b>Entry ID: </b>
              {{task.reference.entryId}}
            </span>
        </div>
        <div class="form-group">
            <span class="col-md-6"><b>Pick Task: </b>
                <span ng-repeat="pickTaskId in task.reference.pickTaskIds">
                    <a ng-href="{{'#/wms/outbound/task/pick-task/' + pickTaskId}}" target="_blank">{{pickTaskId}}</a>
                </span>
            </span>
            <span class="col-md-6"><b>Pack Task: </b>
                 <span ng-repeat="packTaskId in task.reference.packTaskIds">
                    <a ng-href="{{'#/wms/outbound/task/pack-task/' + packTaskId}}" target="_blank">{{packTaskId}}</a>
                 </span>
            </span>
        </div>
        <div class="form-group">
            <div class="col-md-3">
                <b>Start Time:</b>
                <span>{{task.startTime}}</span>
            </div>
            <div class="col-md-3">
                <b>End Time:</b>
                <span>{{task.endTime}}</span>
            </div>
            <span class="col-md-3"><b>Created Time: </b>{{task.createdWhen | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
                &nbsp;<span ng-show="task.createdBy">({{task.createdBy}})</span></span>
            <span class="col-md-3"><b>Updated Time: </b>{{task.updatedWhen | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
                &nbsp;<span ng-show="task.updatedBy">({{task.updatedBy}})</span></span>
        </div>
        <div class="form-group" style="margin-bottom: 20px;">
            <span class="col-md-12"><b>Description: </b>
              {{task.description}}
            </span>
        </div>
        <div class="tabbable-custom" style="margin-bottom: 0px; overflow: visible; margin-top:20px;">
            <ul class="nav nav-tabs">
                <li ng-class="{'active':activeMainTab == 'itemLines'}">
                    <a data-toggle="tab" ng-click="changeMainTab('itemLines')"> Put Back Item Lines </a>
                </li>
                <li ng-class="{'active':activeMainTab == 'historyLines'}">
                    <a data-toggle="tab" ng-click="changeMainTab('historyLines')"> Put Back History Lines </a>
                </li>
                <li ng-class="{'active':activeMainTab == 'steps'}">
                    <a data-toggle="tab" ng-click="changeMainTab('steps')"> Steps </a>
                </li>
            </ul>
            <div class="tab-content" style="padding:15px;">
                <div ng-class="{'active':activeMainTab == 'steps'}" class="tab-pane ">
                    <div class="panel panel-default"  ng-repeat="step in task.steps">
                        <div class="panel-heading">
                            <div class="panel-title" style="display: block; float: left;line-height:34px;"> STEP | {{step.name}}</div>
                            <div class="actions" style="text-align: right;">
                                <button type="button" class="btn yellow" permission-check="{{'task::putBackTask_write'}}" update-step-assignees task-step="step">Edit Assignees</button>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="tabbable-custom" style="margin-bottom: 0px; overflow: visible">
                                <ul class="nav nav-tabs">
                                    <li ng-class="{'active':activeTabs[step.id] == 'content'}">
                                        <a data-toggle="tab" ng-click="changeTab('content', step.id)"> Content </a>
                                    </li>
                                    <li ng-class="{'active':activeTabs[step.id] == 'stepException'}">
                                        <a data-toggle="tab" ng-click="changeTab('stepException', step.id)"> Exception </a>
                                    </li>
                                </ul>
                                <div class="tab-content" style="padding:15px;">
                                    <div ng-class="{'active':activeTabs[step.id] == 'content'}" class="tab-pane ">
                                        <div ng-include="'wms/task/common/template/genericStep.html'"></div>
                                    </div>
                                    <div ng-class="{'active':activeTabs[step.id] == 'stepException'}" class="tab-pane ">
                                        <div class="row form-group" ng-include="'wms/task/common/template/stepException.html'"
                                             ng-repeat="exception in execptionGroupByStepId[step.stepId]">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div ng-class="{'active':activeMainTab == 'itemLines'}" class="tab-pane ">
                    <div ng-include="'wms/task/put-back-task/template/putBackItemLines.html'"></div>
                </div>
                <div ng-class="{'active':activeMainTab == 'historyLines'}" class="tab-pane ">
                    <div ng-include="'wms/task/put-back-task/template/putBackHistoryLines.html'"></div>
                </div>
            </div>
        </div>
    </div>
</div>
